import {
  Alert,
  Button,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from "react-native";
import {
  Menu,
  MenuOption,
  MenuOptions,
  MenuTrigger,
} from "react-native-popup-menu";
import React, { useState } from "react";

export default function YourComponent({
  style,
  item,
  dayIndex,
  daysTotal,
  onEdit,
  onView,
  onDelete,
}) {
  const [isMenuVisible, setIsMenuVisible] = useState(false);

  const handleView = () => {
    onView(item);
    setIsMenuVisible(false);
  };

  const handleEdit = () => {
    onEdit(item);
    setIsMenuVisible(false);
  };

  const handleDelete = () => {
    Alert.alert(
      "Delete Event",
      `Are you sure you want to delete ${item.title}?`,
      [{ text: "Cancel" }, { text: "OK", onPress: () => onDelete(item) }]
    );
    setIsMenuVisible(false);
  };

  /**
   * 长按触发
   */
  const handleDoubleClick = () => {
    setIsMenuVisible(!isMenuVisible);
    setTimeout(() => {
      setIsMenuVisible(false);
    }, 3000);
  };

  return (
    <View
      style={{
        ...style,
        backgroundColor: "red",
        borderRadius: 10,
        elevation: 5,
        padding: 10,
        margin: 5,
      }}
    >
      <TouchableOpacity onLongPress={handleDoubleClick}>
        <Text style={styles.title}>{item.title}</Text>
        <Text style={styles.dateText}>{`${item.Duration}`}</Text>
      </TouchableOpacity>

      {isMenuVisible && (
        <View style={styles.menuContainer}>
          <Button title="View" onPress={handleView} />
          <Button title="Edit" onPress={handleEdit} />
          <Button title="Delete" onPress={handleDelete} />
        </View>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  title: {
    fontWeight: "bold",
    color: "#fff",
    fontSize: 16,
  },
  dateText: {
    color: "#fff",
    marginTop: 5,
  },
  menuContainer: {
    position: "absolute",
    bottom: 10,
    right: 10,
    backgroundColor: "white",
    borderRadius: 10,
    elevation: 5,
    padding: 10,
    zIndex: 1000,
  },
  triggerContainer: {
    backgroundColor: "#333",
    padding: 5,
    borderRadius: 5,
    marginTop: 10,
    alignItems: "center",
  },
  triggerText: {
    color: "#fff",
    fontSize: 14,
  },
  option: {
    padding: 10,
  },
  optionText: {
    fontSize: 16,
    color: "#000",
  },
});
